<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画操作</title>
		<!-- 动画操作：针对页面弹出效果
		 show()      功能：显示效果   本质display:block
		 hide()      功能：隐藏效果   本质display:none
		 
		 slideDown() 功能：(滑动式) 向下效果
		 slideUp()   功能：(滑动式) 向上效果
		 
		 fadeIn()     功能：淡入
		 fadeOut()    功能：淡出
		 
		 hover()      功能：悬停切换
		 
		 -->
		 <style>
			 div{
				 width: 200px;
				 height: 200px;
				 background-color: aquamarine;
				 display: none;
			 }
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
	
		<button id="show">显示</button>
		<button id="hide">隐藏</button>
		<button id="sd">滑动式向下</button>
		<button id="su">滑动式向上</button>
		<button id="fi">淡入</button>
		<button id="fo">淡出</button>
		<div></div>
		
		<script>
			/*1. 显示和隐藏*/
			$("#show").click(function(){
				$("div").show();
			});
			$("#hide").click(function(){
				$("div").hide();
			});
			
			/*2.滑动式  向下/向上*/
			$("#sd").click(function(){
				$("div").slideDown();
			});
			$("#su").click(function(){
				$("div").slideUp();
			});
						
			/*3. 淡入/淡出*/
			$("#fi").click(function(){
				$("div").fadeIn();
			});
			$("#fo").click(function(){
				$("div").fadeOut();
			});
			
			
		</script>
	</body>
</html>